<template>
    <div id="Introduce">
        <span class="in_title" v-text="items_title[0]"/>
        <ul class="in_con">
            <c-item v-for="(v, i) in items_text" :key="i" 
                :title="v"
                :img="imgs[i]"
            />
        </ul>
    </div>
</template>

<script>
import Items from "./item"
import Lang from "./lang.js"
import img0 from "./images/intro1.png"
import img1 from "./images/intro2.png"
import img2 from "./images/intro3.png"
export default {
    name:'Introduce',
    data(){
        return{
            langSelects: [{ value: 0, txt: "简体中文" }, { value: 1, txt: "English" }],
            imgs:[
                img0,
                img1,
                img2,
            ]
        }
    },
    components:{
        "c-item" : Items
    },
    computed:{
        lang() {
			return this.$store.state.setting.lang;
        },
        items_text(){
            let lang = this.lang;
			return Lang.items_text[lang];
        },
        items_title(){
            let lang = this.lang;
			return Lang.items_title[lang];
        }
    }
}
</script>

<style scoped>
#Introduce{
    height: 500px;
    text-align: center;
    padding-top: 60px;

}
.in_title{
    font-size: 30px;
    color: #c7cce6;
}
.in_con{
    width: 100%;
    height: 306px;
    margin-top: 40px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}
</style>
